<script lang="ts" setup name="summarySheet">
import { Inventory } from "@/api/interface";
import { getStockCheckoutAPI, getStorehouseList, getWaresCategoryList } from "@/api/modules/inventory";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { getLastQuarterDays } from "@/utils/date";
import { formatDate } from "@/utils/date-formatter";
import { orderType2, summaryList } from "@/utils/serviceDict";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
// import { checkDeviceType } from "@gg233o-x/my-tools";
const summaryType = ref(0);

const router = useRouter();

const initParam = reactive<{ type: number }>({ type: 1 });

const tableRef = ref<ProTableInstance>();
const columns = ref<ColumnProps[]>([
  {
    type: "index",
    label: "序号",
    width: 80,
    enum: summaryList,
    search: {
      el: "select",
      key: "isSummary",
      defaultValue: 0,
      label: "报表类型"
    },
    isFilterEnum: false
  },
  {
    isShow: !summaryType.value,
    prop: "orderTypeName",
    label: "单据类型",
    width: 120,
    enum: orderType2,
    search: { el: "select", defaultValue: 1, key: "orderType", label: "单据类型" },
    isFilterEnum: false
  },
  { isShow: !summaryType.value, prop: "orderNo", label: "单据编号", search: { el: "input" } },
  {
    isShow: !summaryType.value,
    prop: "houseName",
    label: "入库仓库",
    enum: () => getStorehouseList({ pageSize: 999, pageNum: 1 }),
    search: {
      el: "select",
      key: "houseId"
    },
    fieldNames: {
      label: "name",
      value: "id"
    },
    isFilterEnum: false
  },
  {
    isShow: !summaryType.value,
    prop: "date",
    label: "业务日期",
    search: {
      el: "date-picker",
      key: "timeValue",
      order: 1,
      defaultValue: [formatDate(-getLastQuarterDays(), "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD"
      }
    }
  },

  {
    prop: "barcode",
    label: "原料编号"
    // enum: () => getSupplierList({ pageSize: 999, pageNum: 1 }),
    // search: { el: "select", key: "", label: "供应商" },
    // fieldNames: {
    //   label: "name",
    //   value: "id"
    // },
    // isFilterEnum: false
  },
  {
    prop: "goodsName",
    label: "原料名称",
    search: {
      label: "原料",
      el: "input"
    }
  },
  {
    prop: "categoryName",
    label: "原料类别",
    width: 110,
    enum: () => getWaresCategoryList({ pageSize: 999, pageNum: 1 }),
    search: { el: "tree-select", key: "categoryId" },
    fieldNames: {
      label: "name",
      value: "id"
    },
    isFilterEnum: false
  },
  { prop: "unitName", label: "规格", width: 100 },
  { prop: "quantity", label: "入库数量", width: 110 },
  { prop: "price", label: "入库单价", width: 110 },
  { prop: "amount", label: "入库金额", width: 110 }
]);

const goDetail = (row: Inventory.StockCheckoutList) => {
  switch (row.documentType) {
    case 1:
      router.push("/procure/warehousingEdit?id=" + row.orderId);
      break;
    case 2:
      router.push("/procure/rejectionEdit?id=" + row.orderId);
      break;
    case 3:
      router.push("/stock/stockRealSheetEdi?id=" + row.orderId);
      break;
    case 4:
      router.push("/stock/stockPlanEdit?id=" + row.orderId);
      break;
    case 5:
      router.push("/stock/stockOutEdit?id=" + row.orderId);
      break;
    case 6:
      router.push("/stock/breakageEdit?id=" + row.orderId);
      break;
  }
};

const onSearch = () => {
  summaryType.value = tableRef.value!.searchParam.isSummary;
  tableRef.value!.changeColSetting([
    true,
    summaryType.value ? false : true,
    summaryType.value ? false : true,
    summaryType.value ? false : true,
    summaryType.value ? false : true,
    true,
    true,
    true,
    true,
    true,
    true,
    true
  ]);
};
const onReset = () => {
  summaryType.value = 0;
  tableRef.value!.changeColSetting([true, true, true, true, true, true, true, true, true, true, true, true]);
};

const summary = ref<any[]>([]);
const dataCallback = (data: any) => {
  summary.value = data.summary;
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};
// 合计数据
const getSummaries = () => {
  return summary.value;
};
</script>

<template>
  <div class="summary-sheet-container">
    <div class="table-box">
      <ProTable
        show-summary
        :summary-method="getSummaries"
        :data-callback="dataCallback"
        :init-param="initParam"
        ref="tableRef"
        @search="onSearch"
        @reset="onReset"
        :columns="columns"
        :request-api="getStockCheckoutAPI"
      >
        <template #orderNo="{ row }">
          <div
            :style="{
              color: row.orderNo && row.documentType ? '#f3c45d' : '#333',
              cursor: row.orderNo && row.documentType ? 'pointer' : ''
            }"
            @click="goDetail(row)"
          >
            {{ row.orderNo || "--" }}
          </div>
        </template>

        <template #date="{ row }">
          {{ row.date?.slice(0, 10) }}
        </template>
      </ProTable>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.summary-sheet-container {
  height: 100%;
  overflow: hidden;
  background-color: #ffffff;
}
</style>
